<template>
<!-- 供应商-供应商列表 -->
  <div>
    <div class="i-layout-page-header">
      <PageHeader class="product_tabs" hidden-breadcrumb>
        <div slot="title" class="acea-row row-middle">
          <router-link :to="{ path: `${roterPre}/supplier/menu/list` }">
            <div class="font-sm after-line">
              <span class="iconfont iconfanhui"></span>
              <span class="pl10">返回</span>
            </div>
          </router-link>
          <span
              v-text="'编辑供应商合同'"
              class="mr20 ml16"
          ></span>
        </div>
      </PageHeader>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <!-- 操作 -->
      <Button type="primary" class="btn" @click="addSupplierAgreement"
              v-auth="['admin-supplier-agreement-edit']"
        >添加合同</Button>
      <!-- 表格 -->
      <Table
        :columns="columns"
        :data="tabList"
        ref="table"
        highlight-row
        no-data-text="暂无数据"
        no-filtered-data-text="暂无筛选结果"
        class="orderData ivu-mt"
      >
        <template slot-scope="{ row, index }" slot="signing_time">
          <span>{{ formatTimeNative(row.signing_time) }}</span> <!-- 调用格式化方法 -->
        </template>
        <!-- 操作 -->
        <template slot-scope="{ row, index }" slot="action">
          <a @click="edit(row)" >编辑</a>
          <Divider type="vertical" v-auth="['admin-supplier-agreement-edit']"/>
          <a @click="del(row, '删除合同', index)" class="del" v-auth="['admin-supplier-agreement-edit']">删除</a>
        </template>
      </Table>
    </Card>

    <menus-from :formValidate="formValidate" ref="menusFrom"></menus-from>

  </div>
</template>
<script>
import { mapState } from 'vuex'
import util from '@/libs/util'
import Setting from '@/setting'
import { supplierAgreementList, putSupplierAgreementStatus, supplierAgreementLogin } from '@/api/supplierAgreement'
import Template from '../../setting/devise/template.vue'
import menusFrom from "./components/menusFrom";
export default {
  name: '',
  components: {menusFrom, Template },
  props: {},
  data() {
    return {
      roterPre: Setting.roterPre,
      keywords: '',
      BaseURL: '',
      formValidate: {

      },
      loading: false,
      page: {
        relation_id:0,
        total: 0, // 总条数11111
        pageNum: 1, // 当前页
        pageSize: 15, // 每页显示条数
      },
      columns: [
        {
          title: 'ID',
          key: 'id',
          minWidth: 80,
        },
        {
          title: '合同名称',
          key: 'name',
          minWidth: 150,
        },
        {
          title: '版本',
          key: 'version',
          minWidth: 100,
        },
        {
          title: '签约时间',
          key: 'signing_time',
          slot: "signing_time",
          minWidth: 100,
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 150,
        },
      ],
      tabList: [],
    }
  },
  computed: {
    ...mapState('admin/layout', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 80
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right'
    },
  },
  watch: {},
  created() {
    this.page.relation_id = Number(this.$route.params.id)
    this.getSupplierAgreement()
  },
  mounted() {},
  methods: {
    formatTimeNative(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    addSupplierAgreement() {
      this.$refs.menusFrom.modals = true;
      this.$refs.menusFrom.titleFrom = "编辑供应商合同";
      this.formValidate = {};
      this.formValidate.relation_id = this.page.relation_id;
      this.formValidate.version = "v 1.0.1"

    },

    pageChange(index) {
      this.page.pageNum = index
      this.getSupplierAgreement()
    },

    limitChange(limit) {
      this.page.pageSize = limit
      this.getSupplierAgreement()
    },

    // 获取供应商列表
    getSupplierAgreement() {
      let data = {
        relation_id:this.page.relation_id,
        keywords: this.keywords,
        page: this.page.pageNum, // 当前页
        limit: this.page.pageSize, // 每页显示条数
      }
      supplierAgreementList(data)
        .then(async (res) => {
          this.tabList = res.data
          this.page.total = res.data.count
        })
        .catch((res) => {
          this.$Message.error(res.msg)
        })
    },

    // 编辑
    edit(row) {
      this.$refs.menusFrom.modals = true;
      this.$refs.menusFrom.titleFrom = "编辑供应商合同";
      this.formValidate = row;
    },

    // 修改状态
    onchangeIsShow(row) {
      putSupplierAgreementStatus(row.id, row.is_show)
        .then(async (res) => {
          this.$Message.success(res.msg)
        })
        .catch((res) => {
          this.$$Message.error(res.msg)
        })
    },

    // 删除
    del(row, tit, num) {
      let data = {
        ids: row.id,
      }
      let delfromData = {
        title: tit,
        num: 0,
        url: `/supplierAgreement/deleteSystemSupplierAgreement`,
        method: 'DELETE',
        ids: data,
      }
      this.$modalSure(delfromData)
        .then((res) => {
          this.$Message.success(res.msg)
          this.tabList.splice(num, 1);
          if (!this.tabList.length) {
            this.page.pageNum =
                this.page.pageNum == 1 ? 1 : this.page.pageNum - 1;
          }
          this.getSupplierAgreement()
        })
        .catch((res) => {
          this.$Message.error(res.msg)
        })
    },
  },
}
</script>
<style scoped lang="less">
.input-add {
 width: 250px;
 margin-right: 14px
}
.btn {
  margin: 0 0 10px 0px;
}
.del {
  margin-left: 10px;
}
// .card {
//   margin-top: 15px;
// }
.ivu-form-inline {
  padding-top: 20px;
}
</style>